<template>
  <el-card style="max-width: 780px" v-for="item in artList" :key="item.id">
    <el-row>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />
        {{ item.title }}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple-light" />
        {{ item.content }}
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />
        <span>是否公开</span>
        <el-switch @change="changeArt(item.id, item.title, item.content, item.status)" v-model="item.status" />
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple-light" />
        <el-button @click="editArt(item)" type="success">编辑</el-button>
        <el-popconfirm title="你确定要删除这篇文章?" @confirm="DeleteArt(item.id)" confirm-button-text="删除"
          cancel-button-text='取消'>
          <template #reference>
            <el-button>删除</el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>
  </el-card>
  <el-dialog v-model="editShow" title="修改内容" width="500">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="内容" prop="desc">
        <el-input v-model="form.content" type="textarea" />
      </el-form-item>
      <el-form-item label="是否公开">
        <el-switch v-model="form.status" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="savaArt">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { changeArt, deleteArt, getArt } from '@/api/mange';
import { ref, reactive } from 'vue';
let artList = ref([])
loading()
async function loading() {
  let res = await getArt()
  artList.value = res.data
  console.log(res);
}
// 编辑框
const form = reactive({
  id: '',
  title: '',
  content: '',
  status: ''
})
let editShow = ref(false)
function editArt(item) {
  form.id = item.id;
  editShow.value = true
  form.title = item.title
  form.content = item.content
  form.status = item.status
}
async function savaArt() {
  await changeArt(form.id, form.title, form.content, form.status)
  editShow.value = false
  ElMessage.success('修改成功')

  loading()
}
// 删除
async function DeleteArt(id) {
  let res = await deleteArt(id)
  console.log(res);

  ElMessage.success('删除成功')
  loading()
}
</script>
<style lang="scss">
.el-card {
  margin: 0 auto;
  margin-top: 50px;
}

.el-tooltip__trigger {
  color: #fff;
  background: #f56c6c;
}
</style>